<template>
  <div>
    <div id="wode">
      <p>
        我的频道
      </p>
      <div class="switch switch-inline text-left">
        <input
          type="checkbox"
          @click="changeSort()"
        >
        <label>{{sortmsg}}</label>
      </div>
      <div id="wdpd">

      </div>
    </div>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><a href="#yingshi">影视综</a></div>
        <div class="swiper-slide"><a href="#shishangshenghuo">时尚生活</a> </div>
        <div class="swiper-slide"><a href="#zixun">资讯</a></div>
        <div class="swiper-slide"><a href="#yule">娱乐</a></div>
        <div class="swiper-slide"><a href="#youxi">游戏</a></div>
        <div class="swiper-slide"><a href="#yansheng">衍生</a></div>
        <div class="swiper-slide"><a href="#qita">其它</a></div>
      </div>
    </div>
    <div class="div">
      <div class="title">电视剧</div>
      <div class="title">电影</div>
      <div class="title">综艺</div>
      <div class="title">少儿</div>
      <div class="title">动漫</div>
      <div class="title">记录</div>
      <div class="title">庆余年</div>
      <div class="title">吐槽4</div>
      <div class="title">斗罗</div>
      <div class="title">演员</div>
      <div class="title">offer</div>
      <div class="title">火锅剧</div>
      <div class="title">陈情令</div>
      <div class="title">跨年</div>
    </div>
    <p
      class="p"
      id="shishangshenghuo"
    >时尚生活</p>
    <div class="div">
      <div class="title">HowTo</div>
      <div class="title">时尚</div>
      <div class="title">生活</div>
      <div class="title">搞笑</div>
      <div class="title">母婴</div>
      <div class="title">旅游</div>
      <div class="title">艺术</div>
      <div class="title">美食</div>
      <div class="title">健康</div>
      <div class="title">健身</div>
      <div class="title">宠物</div>
      <div class="title">星座运势</div>
      <div class="title">钓鱼</div>
      <div class="title">汽车</div>
      <div class="title">科技</div>
      <div class="title">教育</div>
    </div>
    <p
      class="p"
      id="zixun"
    >资讯</p>
    <div class="div">
      <div class="title">NBA</div>
      <div class="title">70年</div>
      <div class="title">新闻</div>
      <div class="title">公益</div>
      <div class="title">军事</div>
      <div class="title">财经</div>
      <div class="title">眼界</div>
      <div class="title">奇闻</div>
      <div class="title">文化历史</div>

    </div>
    <p
      class="p"
      id="yule"
    >娱乐</p>
    <div class="div">
      <div class="title">微视</div>
      <div class="title">娱乐</div>
      <div class="title">潮音</div>
      <div class="title">演唱会</div>
      <div class="title">音乐</div>
    </div>
    <p
      class="p"
      id="youxi"
    >游戏</p>
    <div class="div">
      <div class="title">英雄联盟</div>
      <div class="title">王者荣耀</div>
      <div class="title">雪鹰</div>
      <div class="title">和平精英</div>
      <div class="title">PEL</div>
    </div>
    <p
      class="p"
      id="yansheng"
    >衍生</p>
    <div class="div">
      <div class="title">爱玩</div>
      <div class="title">秒玩</div>
      <div class="title">知识</div>
      <div class="title">小说</div>
      <div class="title">漫画</div>
      <div class="title">草场地</div>
      <div class="title">老年版</div>
      <div class="title">互动视频</div>
    </div>
    <p
      class="p"
      id="qita"
    >其他</p>
    <div class="div">
      <div class="title">爱看</div>
      <div class="title">游戏</div>
      <div class="title">英语</div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import '../../assets/js/ChannelList.js'
export default {
  data () {
    return {
      sortmsg: '推荐排序'
    }
  },
  methods: {
    changeSort () {
      if (this.sortmsg === '推荐排序') {
        this.sortmsg = '手动排序'
      } else {
        this.sortmsg = '推荐排序'
      }
    }
  },
  mounted () {
    new Swiper('.swiper-container', { // eslint-disable-line
      slidesPerView: 5
    })
  }

}
</script>
<style scoped>
#wode > p {
  margin-left: 10px;
  margin-top: 5px;
}
#wdpd {
  width: 100%;
  margin-top: 10px;
  overflow: hidden;
}
#wdpd > div {
  width: 22%;
  height: 30px;
  line-height: 30px;
  margin: 5px;
  float: left;
  text-align: center;
}
.switch {
  float: right;
  margin-right: 10px;
}

/* 轮播图 */
.swiper-container {
  width: 100%;
  height: 50px;
}
.swiper-slide {
  text-align: center;
  font-size: 1em;
  background: rgb(255, 252, 252);
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide a {
  color: black;
  text-decoration: none;
}
/* 频道内容 */
.div {
  width: 100%;
  overflow: hidden;
}
.p {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  padding-left: 5px;
}
a:hover {
  color: red;
}

.title {
  float: left;
  width: 22%;
  height: 30px;
  line-height: 30px;
  margin: 5px;
  background-color: white;
  text-align: center;
}
#qita{
  height: 50px;
}
</style>
